<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单列表</title>
    <div th:replace="common/publicJs::common_header"></div>
    <!--    thymeleaf框架的 html中，script需要加th:inline="none" -->
    <script type="text/javascript" th:inline="none">
        $(function () {
            $('#treegrid').treegrid({
                url: ctx + 'sys/menu/all',
                fitColumns: true,
                striped: true,
                idField: 'id',
                treeField:'name',
                parentField: 'parentId',
                iconCls:'iconClass',
                // pagination: true,
                lines: true,
                //菜单打开与关闭是否有动画效果
                animate: true,
                rownumbers: true,
                // singleSelect:true,
                pageList: [3, 10, 50, 100, 500],
                //远程排序,实现方式是重新发请求，但不会发送排序字段，只是前端排序,功能有点鸡肋。
                remoteSort: false,
                columns: [[
                    {field: 'checkbox', checkbox: true},
                    {field: 'id', hidden: true, width: 50, align: "center"},
                    {field: 'name', title: '名字', width: 160, align: "center", sortable: true},
                    {field: 'code', title: '代码', width: 80,align: "center"},
                    {field: 'sort', title: '顺序', width: 40,align: "center"},
                    {field: 'expandState', title: '状态', width: 40,align: "center",
                        formatter:function (value,row,index) {
                            if (value === 1){
                                return '展开'
                            };
                            if (value === 0){
                                return '关闭'
                            };
                        }},
                    {field: 'url', title: '连接url', width: 100},
                    // {field: 'createBy', title: '创建人', width: 100},
                    {field: 'createDate', title: '创建时间', width: 100, sortable: true},
                    // {field: 'updateBy', title: '更新人', width: 100},
                    {field: 'updateDate', title: '更新时间', width: 100, sortable: true},
                ]],
                toolbar: '#toolbar',
                loadFilter:function (data) {
                    var opt = $(this).data().treegrid.options;
                    var idField, textField, parentField;
                    var idField, textField, parentField,iconCls;
                    if (opt.parentField) {
                        idField = opt.idField || 'id';
                        textField = opt.textField || 'text';
                        parentField = opt.parentField;
                        iconCls = opt.iconCls || 'iconCls';
                        var i, l, treeData = [], tmpMap = [];
                        for (i = 0, l = data.length; i < l; i++) {
                            tmpMap[data[i][idField]] = data[i];
                            data[i]['iconCls'] = data[i][iconCls];
                        }
                        for (i = 0, l = data.length; i < l; i++) {
                            if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {
                                if (!tmpMap[data[i][parentField]]['children'])
                                    tmpMap[data[i][parentField]]['children'] = [];
                                data[i]['text'] = data[i][textField];
                                tmpMap[data[i][parentField]]['children'].push(data[i]);
                            } else {
                                data[i]['text'] = data[i][textField];
                                treeData.push(data[i]);
                            }
                        }
                        return treeData;
                    }
                    return data;

                }
            });


        })

        /**
         * 搜索方法
         */
        function doSearch() {
            $('#treegrid').treegrid('load', {
                name: $('#name').val(),
                code: $('#code').val()
            });
        }

        /**
         * 清除搜索表单
         */
        function clearForm() {
            $("#searchForm").form("reset");
        }

        /**
         * 添加菜单
         */
        function add() {
            $('#form').dialog({
                title: '添加',
                width: 550,
                height: 500,
                cache: false,
                href: ctx + 'sys/menu/form',
                modal: true
            });
        }

        /**
         * 修改
         */
        function edit() {
            var selected = $('#treegrid').treegrid('getChecked');
            if (selected.length !== 1) {
                $.messager.alert('提示', '请选择一条数据!', 'info');
                return;
            }
            $('#form').dialog({
                title: '修改',
                width: 550,
                height: 500,
                cache: false,
                href: ctx + 'sys/menu/form?id=' + selected[0].id,
                modal: true
            });
        }

        /**
         * 删除
         */
        function deleteData() {
            var selected = $('#treegrid').treegrid('getChecked');
            if (selected.length == 0) {
                return;
            }
            var names = "";
            var ids = "";
            for (var i = 0; i < selected.length; i++) {
                //名称字符串，用于提示
                names += selected[i].name + ",";
                //id字符串，传到后台
                ids += selected[i].id + ",";
            }
            $.messager.confirm("确认", "确定要删除[ " + names + " ]吗？", function (r) {
                if (r) {
                    var url = ctx + '/sys/menu/delete';
                    $.post(url, {ids: ids}, function (result) {
                        $.messager.alert('提示', result.msg, 'info');
                        if (result.code == 0) {
                            //删除treegrid的选中状态，否则上次操作的缓存会存在
                            $("#treegrid").treegrid('clearSelections');
                            //刷新列表
                            $("#treegrid").treegrid("reload");
                        }
                    })
                }
            });
        }
    </script>
</head>
<body>
<div id="toolbar">
    <form action="" id="searchForm">
        <input class="easyui-textbox" id="name" name="name" data-options="label:'名称:',labelAlign:'right'"
               style="width:25%;"/>
        <input class="easyui-textbox" id="code" name="code" data-options="label:'代码:',labelAlign:'right'"
               style="width:25%;"/>
        <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="doSearch()">搜索</a>
        <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-clear"onclick="clearForm()">清除</a>
    </form>

    <br>
    <a href="#" class="easyui-linkbutton" onclick="add()" iconCls="icon-add" plain="true">新增</a>
    <a href="#" class="easyui-linkbutton" onclick="edit()" iconCls="icon-edit" plain="true">修改</a>
    <a href="#" class="easyui-linkbutton" onclick="deleteData()" iconCls="icon-remove" plain="true">删除</a>
</div>
<table id="treegrid"></table>
<div id="form"></div>
</body>
</html>